<template>
  <div class="list-container">
    <el-form class="search-panel" v-model="formData" :inline="true">
      <el-form-item label="出勤时间：">
        <el-date-picker
          v-model="formData.date"
          type="month"
          placeholder="选择出勤时间"
          value-format="yyyy-MM">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <div class="table-panel">
      <el-breadcrumb class="bread" separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>{{serviceCorporationName}}</el-breadcrumb-item>
        <el-breadcrumb-item>{{teamName}}</el-breadcrumb-item>
        <el-breadcrumb-item>{{personName}}</el-breadcrumb-item>
      </el-breadcrumb>
      <el-table
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column type="index" align="center" width="55" label="序号">
        </el-table-column>
        <el-table-column prop="day" label="出勤日期" align="center">
        </el-table-column>
        <el-table-column prop="time" label="考勤时间" align="center">
        </el-table-column>
        <el-table-column align="center" label="合计">
          <template slot-scope="scope">
            <div>{{ scope.row.total }}小时</div>
          </template>
        </el-table-column>
        <el-table-column label="参考生活费" align="center">
          <template slot-scope="scope">
            <div>￥{{scope.row.alimony}}</div>
          </template>
        </el-table-column>
        <el-table-column label="参考工资" align="center">
          <template slot-scope="scope">
            <div>￥{{scope.row.wage}}</div>
          </template>
        </el-table-column>
        <el-table-column label="实际生活费" align="center">
          <template slot-scope="scope">
            <div>￥{{scope.row.actualAlimony}}</div>
          </template>
        </el-table-column>
        <el-table-column label="实际工资" align="center">
          <template slot-scope="scope">
            <div>￥{{scope.row.actualWage}}</div>
          </template>
        </el-table-column>
        <el-table-column min-width="150" label="操作" align="center" fixed="right">
          <template slot-scope="scope">
            <el-button
                  type="text"
                  icon="el-icon-circle-check"
                  >确认</el-button
                >
            <el-button
              @click.native.prevent="checkRow(scope.row, scope.$index)"
              type="text"
              icon="el-icon-edit"
              >调整</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-row class="page">
        <div class="page-tag">
          共{{ Math.ceil(totalData / pageSize) }}页/{{ totalData }}条数据
        </div>
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-sizes="[10, 20, 50]"
          :page-size="pageSize"
          layout="sizes, prev, pager, next, jumper"
          :total="totalData"
        >
          >
        </el-pagination>
      </el-row>
    </div>

    <!-- 调整弹窗 -->
    <el-dialog
      class="small-dialog"
      width="600px"
      title="调整日工资"
      :visible.sync="dialogFormVisible"
    >
      <el-form :model="dialogForm" :inline="true" label-width="100px">
        <div class="tag">参考工资</div>
        <div class="inline-form">
        <el-form-item label="参考日工资：">
          <el-input disabled v-model="dialogForm.wage"></el-input>
        </el-form-item>
        <el-form-item label="参考生活费：">
          <el-input disabled v-model="dialogForm.alimony"></el-input>
        </el-form-item>
        </div>
        <div class="tag">实际工资</div>
        <div class="inline-form">
        <el-form-item label="实际日工资：">
          <el-input v-model="dialogForm.actualDailyWage"></el-input>
        </el-form-item>
        <el-form-item label="实际生活费：">
          <el-input v-model="dialogForm.actualAlimony"></el-input>
        </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmDialog">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  monthlyWageDetail,updateDailyWage
} from "@/api/wage";
export default {
  data() {
    return {
      formData: {
        date:null,
      },
      personId:null,
      serviceCorporationName:null,
      teamName:null,
      personName:null,
      dialogFormVisible: false,
      currentPage: 1,
      pageSize: 10,
      totalData: 0,
      dialogForm: {},
      tableData: [],
    };
  },
  created(){
    this.personId = this.$route.query.personId
    this.formData.date = this.$route.query.date
    //this.getStatisticList()
  },
  methods: {
    onSubmit() {
      console.log(this.formData)

      this.getStatisticList()
    },
    getStatisticList(){

      monthlyWageDetail({
        currentPage:this.currentPage,
        pageSize:this.pageSize,
        person_id:this.personId,
        date:this.formData.date
      }).then(res=>{
        console.log('tableData',res);
        var tableData = res.data
        console.log()
        this.tableData = tableData
      })
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.getStatisticList()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.getStatisticList()
    },
    checkRow(res, index) {
      console.log('日调整',res)
      this.dialogForm = {
        alimony:res.alimony,
        wage:res.wage,
        actualDailyWage: res.actualWage,
        actualAlimony: res.actualAlimony,
        date:res.day,
        personId:res.personId
      },
      this.dialogFormVisible = true
    },
    confirmRow(res) {
     this.$confirm("是否确认" + res.personName + "的日工资?", "日工资确认", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "确认日工资成功!",
          });
          this.getStatisticList()
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消确认",
          });
        });
    },
    // deleteRow(res) {
    //   this.$confirm(
    //     "是否确认删除" +
    //       res.startTime.substr(0, 10)+
    //       "的工资?",
    //     "月工资删除",
    //     {
    //       confirmButtonText: "确认",
    //       cancelButtonText: "取消",
    //       type: "warning",
    //     }
    //   )
    //     .then(() => {
    //       this.$message({
    //         type: "success",
    //         message: "删除成功!",
    //       });
    //     })
    //     .catch(() => {
    //       this.$message({
    //         type: "info",
    //         message: "已取消删除",
    //       });
    //     });
    // },
    // 弹窗确认
    confirmDialog() {
      // this.dialogFormVisible = false;
      // console.log(this.dialogForm);
      updateDailyWage({
        actualAlimony: this.dialogForm.actualAlimony,
        actualDailyWage: this.dialogForm.actualDailyWage,
        date: this.dialogForm.date,
        personId: this.personId,
        alimony: this.dialogForm.alimony,
        dailyWage: this.dialogForm.wage,
      }).then((e) => {
        this.getStatisticList()
        this.dialogFormVisible = false;
      });
    }
  },
};
</script>
<style lang="scss" scoped>
.bread{
  padding-bottom: 20px;
  font-size: 16px;
  font-weight: 600;
}
</style>
